
<style lang="scss">
.z-color-picker {
  &__trigger {
    display: inline-block;
    box-sizing: border-box;
    height: 40px;
    width: 40px;
    padding: 4px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 0;
    position: relative;
    cursor: pointer;
  }
  &__color {
    position: relative;
    display: block;
    box-sizing: border-box;
    border: 1px solid #999;
    border-radius: 2px;
    width: 100%;
    height: 100%;
    text-align: center;
  }
  &__color-inner {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
  &__icon {
    display: inline-block;
    width: 100%;
    color: #fff;
    text-align: center;
  }
  &__empty, &__icon {
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
  }
}
</style>


<template>
  <div class="z-color-picker">
    <el-popover
        placement="bottom-start"
        title=""
        width="240"
        trigger="hover"
        v-model="visible"
        >
      <div class="z-color-picker__trigger"  slot="reference">
        <span class="z-color-picker__color">
        <span class="z-color-picker__color-inner"
              :style="{'background-color': color}"></span>
      </span>
        <span class="z-color-picker__icon el-icon-arrow-down" v-if="color"></span>
        <span class="z-color-picker__empty el-icon-close" v-if="!color"></span>
      </div>
      <div class="z-color-picker__content">
        <div><color-picker  :value="color" @change="changeColor"></color-picker></div>
<!--        <div class="z-color-picker__actions">-->
<!--          <el-button type="primary" @click="confirm">确定</el-button>-->
<!--        </div>-->
      </div>
    </el-popover>
  </div>
</template>

<script>
import 'color-picker-web-component'

export default {
  name: "ZColorPicker",
  props: {
    value: null
  },
  data() {
    return {
      visible: false,
      color: 'rgb(64, 158, 255)'
    }
  },
  methods: {
    changeColor(e) {
      // console.log('changeColor', e)
      this.color = e.detail.value;
      if (this.visible) {
        this.$emit('change', this.color)
      }
    },
    confirm() {
      this.visible = false;
      this.$emit('confirm', this.color)
    }
  }
}
</script>
